<script setup lang="ts">
import type { DataType } from '../../types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

import {
  Alert,
  Button,
  message,
  Modal,
  Popconfirm,
  Skeleton,
  Space,
} from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { doAction, doBackup, getList } from '#/api/admin/backup';
import Icon from '#/components/Icons';

const loading = ref<boolean>(true);
const tableData = ref([]);
const gridOptions: VxeGridProps<DataType> = {
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  checkboxConfig: {
    labelField: 'name',
    highlight: true,
    range: true,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50, showOverflow: true },
    { field: 'name', type: 'checkbox', title: '表名称', align: 'left' },
    { field: 'comment', title: '备注' },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 240,
    },
  ],
  data: tableData.value,
  keepSource: true,
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        const { data } = await getList();
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({
  gridOptions,
});

/**
 * 备份操作
 */
const handleBackup = () => {
  const $table = GridApi.grid;
  const selectRows = $table.getCheckboxRecords();
  if (selectRows.length > 0) {
    Modal.confirm({
      title: '系统提示',
      content: '你确定要备份选中项吗',
      async onOk() {
        try {
          const tables = selectRows.map((item) => item.name).join(',');
          const { msg } = await doBackup({ tables });
          message.success(msg);
        } catch {
          // 不做处理
        }
      },
    });
  } else {
    message.error('未选中任何表');
    return false;
  }
};

/**
 * 按照action来执行操作
 */
const handleAction = async (table: string, action: string) => {
  const { msg } = await doAction({ table, action });
  message.success(msg);
  GridApi.query();
};
onMounted(async () => {
  if (typeof GridApi?.grid?.commitProxy === 'function') {
    GridApi.query();
  }
  loading.value = false;
});
</script>

<template>
  <Alert message="温馨提示：建议避开系统使用高峰期进行" type="info" />
  <Skeleton :loading="loading">
    <Grid table-title="数据表列表">
      <template #toolbar-tools>
        <Button class="mr-2" type="primary" @click="handleBackup()">
          <span class="anticon">
            <Icon icon="ri:add-line" />
          </span>
          开始备份
        </Button>
      </template>

      <template #action="{ row }">
        <Space>
          <Popconfirm
            cancel-text="否"
            ok-text="是"
            title="确认复制？"
            @confirm="handleAction(row.name, 'copytable')"
          >
            <Button type="primary">
              <template #icon>
                <span class="anticon">
                  <Icon icon="ri:file-copy-line" />
                </span>
              </template>
              复制
            </Button>
          </Popconfirm>
          <Popconfirm
            cancel-text="否"
            ok-text="是"
            title="确认删除？"
            @confirm="handleAction(row.name, 'deltable')"
          >
            <Button danger type="primary">
              <template #icon>
                <span class="anticon">
                  <Icon icon="ri:delete-bin-line" />
                </span>
              </template>
              删除
            </Button>
          </Popconfirm>
        </Space>
      </template>
    </Grid>
  </Skeleton>
</template>
